<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .millisecond{
            font-weight: 700;
            color: red;
        }
        #wait-text{
            color: red;
        }
    </style>
</head>
<body>
    <h1>当绿色方块变红的的事点击方块来查看你的反应时间</h1>
    <h2>你的反应时间是：<span class="millisecond">0</span> ms</h2>
    <h2>
        <span id="wait-text">等待开始</span>
    </h2>
    <div class="box"></div>
    <button id="start-btn">开始</button>
    <button id="reset-btn">重置</button>
    <script>
        var startTime = 0;
        var timer = null;
        // 定义一个计时器
        document.getElementById('start-btn').onclick = function() {
            // 定义一个0~10的随机数
            var randomNum = Math.floor(Math.random() * 10000) + 3000;
            document.getElementById('wait-text').innerHTML = '已经开始计时';
            timer = setTimeout(function() {
                // 获取当前时间戳
                startTime = new Date().getTime();
                document.querySelector('.box').style.backgroundColor = 'red';
            }, randomNum);
        }
        // 重置
        document.getElementById('reset-btn').onclick = function() {
            document.querySelector('.box').style.backgroundColor = 'green';
            document.querySelector('.millisecond').innerHTML = '0';
            startTime = 0;
            if(timer){
                clearInterval(timer);
                timer = null;
            }
            document.getElementById('wait-text').innerHTML = '等待开始';
        }
        // 点击获取时间差
        document.querySelector('.box').onclick = function() {
            // 如果提前点击出现提示
            if (startTime === 0) {
                alert('请不要提前点击！');
                document.getElementById('reset-btn').onclick();
                return;
            }
            // 获取当前时间戳
            var endTime = new Date().getTime();
            // 计算时间差
            var timeDiff = endTime - startTime;
            // 显示时间差
            document.querySelector('.millisecond').innerHTML = timeDiff;
            document.getElementById('wait-text').innerHTML = '结果出现了';
        }
    </script>
</body>
</html>